<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
  <p v-red>123</p>
  <p v-color="'pink'">456</p>
  <p v-color="cl">789</p>
  <p v-book="bookName"></p>
  <p v-book2>{{bookName}}</p>
</div>
</body>
<script>
  new Vue({
    el:'#root',
    data:{
      cl:"yellow",
      bookName:"小红帽"
    },
    directives:{
      red(el){
        el.style.color="red";
      },
      color(el,binds){
        el.style.color=binds.value;
      },
      book(el,binds){
        el.innerText="《"+binds.value+"》"
      },
      book2(el){
        el.innerText = "《"+el.innerText+"》"
      }
    }
  })
</script>
</html>